import { Menu, Layout } from "antd";
import { useState } from "react";
import { NavLink, useNavigate } from "react-router-dom";

import useSecurity from "../hooks/useSecurity";

const { Header } = Layout;

const PageHeader = () => {
  const [current, setCurrent] = useState("mail");
  const { loggedIn, logout, user } = useSecurity();
  const navigate = useNavigate();

  const tabsData =
    !loggedIn && !user
      ? [
          {
            label: <NavLink to={"/"}>Home</NavLink>,
            key: "home",
          },
          {
            label: <NavLink to={"/signin"}>Sign In</NavLink>,
            key: "signin",
          },
        ]
      : [
          {
            label: <NavLink to={"/"}>Home</NavLink>,
            key: "home",
          },
          {
            label: loggedIn && <NavLink to={"/people"}>People</NavLink>,
            key: "people",
          },
          {
            label: loggedIn && <NavLink to={"/posts"}>Posts</NavLink>,
            key: "posts",
          },
          {
            label: "Logout",
            key: "logout",
          },
        ];

  const onClick = (e) => {
    if (e.key === "logout") {
      logout();
      navigate("/signin", { replace: true });
    }
    setCurrent(e.key);
  };

  return (
    <Header style={{ display: "flex", padding: "0" }}>
      <Menu
        onClick={onClick}
        selectedKeys={[current]}
        mode="horizontal"
        items={tabsData}
        style={{ flex: 1, minWidth: 0 }}
      />
    </Header>
  );
};

export default PageHeader;
